<template>
  <div class="commen-container">
    <h1>网站首页管理</h1>
    <el-tabs tab-position="left" style="height: auto" :stretch="true">
      <el-tab-pane label="教学团队">
        <teacher-team></teacher-team>
      </el-tab-pane>
      <el-tab-pane label="课程介绍">
        <course-intro></course-intro>
      </el-tab-pane>
      <el-tab-pane label="教学方向">
        <direction></direction>
      </el-tab-pane>
      <el-tab-pane label="教学功能">
        <function></function>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import CourseIntro from "@/views/home/other/component/courseIntro.vue";
import TeacherTeam from "@/views/home/other/component/teacherTeam.vue";
import Direction from "@/views/home/other/component/direction.vue";
import Function from "@/views/home/other/component/function.vue";
import {defineComponent} from "vue";

export default defineComponent({
  components: {TeacherTeam, CourseIntro, Direction, Function},
  // mounted() {
  //   this.$nextTick(() => {
  //     const content = this.$el.querySelector('.el-tabs__content')
  //     const header = this.$el.querySelector('.el-tabs__header')
  //     header.style.height = `${content.clientHeight}px`
  //   })
  // }
})

</script>
<style scoped lang="scss">
.tab-container {
  flex: 1;
}

/* 关键CSS */
.custom-tabs {
  display: flex !important; /* 强制flex布局 */
}

.custom-tabs > .el-tabs__header {
  height: 100vh !important; /* 取消固定高度 */
  margin-right: 20px !important; /* 调整标签与内容的间距 */
}

.custom-tabs > .el-tabs__content {
  flex: 1; /* 内容区域自适应 */
  overflow: visible !important; /* 避免内容被裁剪 */
}
</style>
